import { useEffect, useState, FC, PropsWithChildren } from "react";
import { Helmet } from "react-helmet-async";
import { getApiKey } from "api/api";
import { pageTitle } from "utils/page";
import { CliAuthPageView } from "./CliAuthPageView";

export const CliAuthenticationPage: FC<PropsWithChildren<unknown>> = () => {
  const [apiKey, setApiKey] = useState<string | null>(null);

  useEffect(() => {
    getApiKey()
      .then(({ key }) => {
        setApiKey(key);
      })
      .catch((error) => {
        console.error(error);
      });
  }, []);

  return (
    <>
      <Helmet>
        <title>{pageTitle("CLI Auth")}</title>
      </Helmet>
      <CliAuthPageView sessionToken={apiKey} />
    </>
  );
};

export default CliAuthenticationPage;
